<template>
  <div>
    <!-- 头部导航 -->
    <!-- <Nav></Nav> -->
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" class="swiper">
      <van-swipe-item v-for="(image, index) in swiperList" :key="index" height="185px">
        <img class="img" :src="image.picUrl" />
      </van-swipe-item>
    </van-swipe>

    <!-- 底部 -->
    <div class="footer" v-for="(item, index) in categoryItemList" :key="index">
      <!-- 两行字 -->
      <div class="title">
        <div class="big">{{ item.category.name }}</div>
        <div class="small">{{ item.category.frontDesc }}</div>
      </div>

      <!-- 商品展示 -->
      <van-grid :column-num="2" :border="false" class="gird">
        <van-grid-item icon="photo-o" class="item" v-for="(good, index) in item.itemList" :key="index">
          <!--  @click="goDetail(good.id)" -->
          <img :src="good.listPicUrl" style="width: 170px; height: 170px; display: block" />
          <div style="font-size: 16px">{{ good.name }} 经典爆款</div>
          <div style="margin-left: -50px">
            <span style="font-size: 14px; color: red">到手价￥</span>
            <span style="color: red">{{ good.sellVolume }}</span>
            <s style="font-size: 14px">￥{{ good.retailPrice }}</s>
          </div>
          <div
            style="margin-left: -100px; background: red; color: white; font-size: 12px; border-radius: 10px; width: 70px; text-align: center">
            满99减15元
          </div>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { mapGetters, mapState } from "vuex";
// 引入vant组件
import { Button, NavBar, Icon, Swipe, SwipeItem, Grid, GridItem } from "vant";

// 使用组件
Vue.use(Button);
Vue.use(Icon);
Vue.use(NavBar);
Vue.use(Swipe);
Vue.use(SwipeItem);

Vue.use(Grid);
Vue.use(GridItem);
export default {
  data() {
    return {
      id: this.item
    };
  },
  name: "Bottom",
  components: {

  },
  props: ["categoryId"],
  mounted() {
    // this.getCategoryData();
    // 根据分类ID获取分类的列表
    this.getNavList();
  },
  methods: {

    // 根据分类ID获取分类的列表
    getGoodsList() {
      console.log(123);
      this.$store.dispatch("home/getGoodsList");
    },
    getNavList() {
      this.$store.dispatch("home/getNavList");
    },
    // // 去详情页
    // goDetail(id) {
    //   console.log(id)
    //   this.$router.push({ name: 'detail', params: { skuId: id } })
    // }
  },
  computed: {
    ...mapGetters("home", ["swiperList", "categoryItemList"]),
    ...mapState({
      list: (state) => state.home.list,
    }),
  },
};
</script>

<style lang="less" scoped>
.swiper {
  height: 180px;

  .img {
    width: 375px;
    height: 185px;
  }
}

.footer {
  margin-top: 20px;

  .title {
    width: 100%;

    .big {
      font-size: 18px;
      text-align: center;
    }

    .small {
      font-size: 13px;
      text-align: center;
      color: rgb(153, 153, 153);
    }
  }
}
</style>
